<template>
  <div class="map-wrap">
    <div class="echart" id="echart"></div>
    <div class="map-btn" v-if="isDrilling">
      <a-button type="primary" @click="returnBack">返回上一级</a-button>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, onUnmounted, ref } from 'vue'
import axios from 'axios'
import { message } from 'ant-design-vue'

let echart = null

const fMapNameList = ref([
  {
    name: '中华人民共和国',
    level: 'country',
    adcode: 100000
  }
])
const isDrilling = ref(false)
const loading = ref(false)

onMounted(() => {
  initMap('world')
})

const initMap = () => {
  if (echart) {
    echart.dispose()
  }
  axios.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json').then((res) => {
    echarts.registerMap('中华人民共和国', res.data)
    let option = {
      geo: {
        show: true,
        map: '中华人民共和国',
        zoom: 1,
        itemStyle: {
          normal: {
            areaColor: 'rgba(15, 15, 206, 0.836)',
            borderColor: 'rgb(0, 225, 255)'
          },
          emphasis: {
            areaColor: 'transparent'
          }
        },
        label: {
          normal: {
            show: true,
            color: '#fff'
          },
          emphasis: {
            color: '#fff'
          }
        },
        zlevel: -1,
        regions: res.data.features.map((item) => {
          return item.properties
        })
      }
    }
    echart = echarts.init(document.getElementById('echart'))
    echart.setOption(option)
    echart.on('click', function (params) {
      if (params.componentType == 'geo' && !loading.value) {
        let region = params.region
        if (region.childrenNum == 0) {
          message.warning('暂无该地区数据')
        } else {
          let obj = {
            name: region.name,
            level: region.level,
            adcode: region.adcode
          }
          mapDrilling(obj)
          isDrilling.value = true
          fMapNameList.value.push(obj)
        }
      }
    })
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        echart.setOption({
          series: [
            {
              name: '测站',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: [
                {
                  name: '你的位置',
                  value: [position.coords.longitude, position.coords.latitude]
                }
              ],
              color: 'red',
              symbol: 'circle',
              symbolSize: [10, 10],
              rippleEffect: {
                //涟漪特效
                period: 4, //动画时间，值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 4 //波纹圆环最大限制，值越大波纹越大
              }
            }
          ]
        })
      })
    } else {
      console.log('Geolocation is not supported by this browser.')
    }
  })
}

const mapDrilling = (obj) => {
  loading.value = true
  axios
    .get('https://geo.datav.aliyun.com/areas_v3/bound/' + obj.adcode + '_full.json')
    .then((res) => {
      echarts.registerMap(obj.name, res.data)
      let option = {
        geo: {
          map: obj.name,
          regions: res.data.features.map((item) => {
            return item.properties
          })
        }
      }
      echart.setOption(option)
      loading.value = false
    })
    .catch((err) => {
      message.warning('暂无该地区数据')
    })
}

const returnBack = () => {
  let fMapName = fMapNameList.value[fMapNameList.value.length - 2]
  fMapNameList.value.pop()
  mapDrilling(fMapName)
  if (fMapNameList.value.length === 1) {
    isDrilling.value = false
  }
}

onUnmounted(() => {
  echart.dispose()
})
</script>

<style lang="scss" scoped>
.map-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  .echart {
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 139);
  }
  .map-btn {
    position: absolute;
    top: 20px;
    left: 20px;
  }
}
</style>